<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改绑定手机号</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				background-color: #f6f6f6;min-height: 100vh;font-size: 0.373rem;
			}
			ul, ol { list-style:none; } 
			body input[type='text'],ul,li{padding: 0;margin: 0;}
			.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
			/*顶部*/
			.my_login_li{
				background: #fff;padding:0 0.373rem;display: flex;line-height: 1.333rem;border-bottom: 1px solid #e2e2e2;    justify-content: center;
    align-items: center;
			}
			.my_login_li span{
				padding-left:0.373rem;width: 3rem;text-align: left;
			}	
			.my_login_li input{
				border: 0;line-height: 1.333rem;height: 1.333rem;color: #888888;
			}	
			.my_login_li .login-num-btn{
				width: 2.893rem;border: 1px #888888 solid;height: 0.786rem;line-height: 0.786rem;padding: 0 0.2rem;
			}
    		.my_content{
    			background: #f6f6f6;
    		}
    		.my_login{
    			padding-top: 0.253rem;
    		}
    		.my_content button{
    			background: url(../images/my_buttom.png) no-repeat;color: #FFFFFF;line-height: 1.266rem;height: 1.266rem;
    width: 100%;padding: 0;box-sizing: border-box;background-size: 100% 100%;border: 0;
    		}
    		.my_butn{
    			margin: 1.093rem 0.373rem;
    		}
    		.my_login_li .classcolor{
    			background: #000;width: 2.893rem;border: 1px #888888 solid;height: 0.786rem;line-height: 0.786rem;padding: 0 0.2rem;
    		}
    		.my_login_li input[type='text']{font-size: 0.373rem;  }
		</style>
	</head>


	<body>
		<!--顶部-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">修改绑定手机号</h1>
		</header>
		<div class="my_content mui-content">	
			<div class="mu_login-all" id="my_login">
	 			<ul class="my_login">
	 				<li class="my_login_li">
	 					<span>手机号</span>
	 					<input type="text" v-model="new_phone" placeholder="请输入新的手机号" />
	 				</li>
	 				<li class="my_login_li">
	 					<span>验证码</span>
	 					<input type="text" v-model="code" placeholder="请输入验证码" style="padding: 0 0.6rem;"/>
	 					<input class="login-num-btn" name="color" type="button" value="获取验证码" />


	 				</li>
	 			</ul>
	 			<div class="my_butn" @click="confirm_bind"><button>确认绑定</button></div>
	 		</div>
		</div>
	<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
 
			var app = new Vue({
				el:'.mui-content',
				data:{
					new_phone:'',
					code:'',
					server_code:'',
					user:''
				},
				methods:{
					confirm_bind:function(){
						if(this.code==this.server_code){
							console.log('验证码通过')
							console.log('开始请求更换手机号');
					 
							$.ajax({
								type:"post",
								url:"https://zhapp.4hl.cn/api/User/changephone",
								data:{
									phoney:app.user.phone,
									phone:app.new_phone,
									uid:app.user.uid
								},
								success:function(res){
									 
									
									res = JSON.parse(res);
									console.log(res)
									if(res.code==1){ 
										var number  = Storage.get('usernumber');
										localStorage.clear();
										localStorage.setItem('usernumber',JSON.stringify(number))
										mui.toast("更换成功");
										mui.openWindow({
											url:'logn.html',
											id:'logn.html',
											createNew:true
										})
									}else{
										mui.toast("更换失败")
									}
									
								},
								error:function(){
									 
									mui.toast("服务器出问题了")
									
								}
							});
							
						}else{
							mui.toast("验证码错误")
						}
					}
				},
				mounted:function(){
					var user = localStorage.getItem('user');
					if(user){
						user = JSON.parse(user);
						this.user  = user;
					}
					bind_get_code_btn();
					
				}
			})
			
			
			
			function bind_get_code_btn() {
				mui('#my_login').on('tap', '.login-num-btn', function() {
					if(!util.testPhone(app.new_phone)){
						mui.toast("请输入正确的手机号");
						return;
					}
					 
					var colorEl = document.querySelector('input[name="color"]');
					colorEl.disabled = 'disable';
					colorEl.className = 'classcolor';
					var time = 60;
					var set = setInterval(function() {
						if(time == 0) {
							colorEl.disabled = ''
							colorEl.value = '重新获取'
							colorEl.className = 'login-num-btn';
							clearInterval(set);
						} else {
							time--
							colorEl.value = time
						}
					}, 1000);
					 
					$.ajax({
						type:"get",
						url:"https://zhapp.4hl.cn/api/User/checkcode",
						data:{
							phone:app.new_phone
						},
						success:function(res){
							 
							console.log(res)
							res = $.trim(res);
							app.server_code = res;
						}
						
					});

				});
			}
		</script>
	</body>

</html>